/**
 * 加载首页信息
 */
function getIndexMesg() {
    $.ajax({
        type: 'get',
        url: "http://www.xiongmaoyouxuan.com/api/tab/1",
        headers: {
            'x-platform': 'pc'
        },
        success: function (result) {
            if (result.code === 200) {
                // 获取商品列表
                let itemList = result.data.items.list
                showGoodsList(itemList)
                // 获取首页三宫格
                let indexList = result.data.gridsV2
                showThreePalace(indexList)
                // 获取轮播图
                let banners = result.data.banners
                showSwiper(banners)
            }
        }
    })
}
// 将轮播图渲染到首页
function showSwiper(banners) {
    if (banners.length == 0) {
        let sliperItemStr = `
        <div class="swiper-slide">
            <img src = 'img/banner1.jpeg'>
        </div>
        `
        $('.swiper-wrapper').html(sliperItemStr)
    } else {
        let newSwiperList = banners.map(item => {
            return `
                <div class="swiper-slide">
                    <img src='${item.imageUrl}' alt='banner1'>
                </div>`
        })
        let sliperItemStr = newSwiperList.join('')
        $('.swiper-wrapper').html(sliperItemStr)
    }

    new Swiper('.swiper-container', {
        loop: true, //循环模式
        autoplay: true, //自动轮播

        // 分页器
        pagination: {
            el: ".swiper-pagination",
            clickable: 'true'
        },

        // 前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    })
}

//将首页三宫格渲染到首页
function showThreePalace(threePalace) {
    let nine = `
        <h3>${threePalace[0].title}</h3>
        <p>${threePalace[0].text}</p>
        <div class='bg'></div>
        <img src="${threePalace[0].imageUrl}" alt="">
    `
    $('.topRight').html(nine)

    // bannerBottom部分
    let str = ``
    for (var i = 2; i > 0; i--) {
        let bottomStr = `
            <a href="#">
            <div class="mesg">
                <h3>${threePalace[i].title}</h3>
                <p>${threePalace[i].text}</p>
                <span>Go</span>
            </div>
            <div class="pic">
                <img src="${threePalace[i].imageUrl}" alt="">
            </div>
         </a>`
        str += bottomStr
    }
    let str2 = `
        <a href="#" class="bottomRight">
        <div class="mesg">
            <p>扫码下载APP</p>
            <p>发现更多惊喜</p>
        </div>
        <div class="pic">
            <img src="../img/ewm.png" alt="">
        </div>
    </a>
    `
    str += str2
    $(".bannerBottom").html(str)

    // 点击首页三宫格跳转到相应页面
    toAppointPage()
}

let list = []
//将商品信息渲染到首页
function showGoodsList(goodsList) {
    // list = [...list, ...goodsList]
    // 去掉多余数据
    let num = goodsList.length % 4
    if (num != 0) {
        goodsList.splice(goodsList.length - num, num)
    }

    let str = ``
    goodsList.forEach((item, index) => {
        let itemStr = `<li>
        <div class='product' onclick = "toDetails(${item.id})">
            <img src="${item.image}" alt="">
            <div class = 'mesg'>
                <p class='title'>${item.title}</p>
                <div class="main">
                    <p>淘宝</p>
                    <span>包邮</span>
                </div>
                <div class="foot">
                    <div class="left">
                        <p class = 'price'>
                            <span class = 'f'>￥</span>${item.price}
                        </p>
                        <p class = 'num'>${item.saleNum}人已买</p>
                    </div>
                    <div class="right">
                        <p>${item.couponValue}</p>
                    </div>
                </div>
            </div>
        </div>
    </li>`
        str += itemStr
    })
    // $('.goodsList').html(str)
    $('.goodsList').append(str)

    // 点击进入商品详情页面
    toDetails()
}

/**
 * 加载商品列表数据
 */
function loadProductList(pageNo) {
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/tab/1/feeds',
        type: 'get',
        data: {
            start: pageNo * 20
        },
        success: function (result) {
            if (result.code == 200) {
                let productList = result.data.list
                // 渲染商品数据
                showGoodsList(productList)
            }
        }
    })
}

// 加载更多
function loadMore() {
    let pageNo = 0
    // 绑定加载更多事件
    $('.more').on('click', function () {
        pageNo++
        loadProductList(pageNo)
    })
}

// 点击进入商品详情页面
function toDetails(id) {
    $('.product').on('click', function () {
        location.href = '../pages/details.html?id=' + id
    })
}

// 点击首页三宫格跳转到相应页面
function toAppointPage() {
    $('.rightBanner').on('click', '.topRight', function () {
        location.href = '../pages/index-99by.html'
    })
    $('.rightBanner').on('click', 'a:nth-child(1)', function () {
        location.href = '../pages/index-cold.html'
    })
    $('.rightBanner').on('click', 'a:nth-child(2)', function () {
        location.href = '../pages/index-val.html'
    })
    $('.rightBanner').on('click', 'a:nth-child(3)', function () {
        location.href = 'http://www.xiongmaoyouxuan.com/#/downLoad'
    })
}

getIndexMesg()
loadMore()